<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>census</title>
        <script type="text/javascript" src="d3.v3.js"></script>
    </head>
    <body>




        <script>
			//Sex  1--male  2--female
			//Year 1900  or 2000
			//Age  0--90+   interval 5
			//People
            d3.csv("census2000.csv",function(error,data){
                if(error){
                    console.log("error");
                }
               // console.log(data);
				
				
				
				
            })
            
			var data = [1,6,4,3,3,8,5,4,3,7],
				bar_height = 35,
				bar_padding = 1,
				height = (bar_height + bar_padding)*data.length,
				width = 800;


			var scale = d3.scale.linear()
						  .domain([0,d3.max(data)])
					 	  .range([0,width-20]);
			var svg = d3.select("body")
						.append("svg")
						.attr("width", width)
						.attr("height", height);

			// 添加SVG画布
			var bar = svg.selectAll("g")
						 .data(data)
			 			 .enter()
						 .append("g")
						 .attr("transform",function(d,i){
							 console.log(d);
			  					return "translate(0,"+i*(bar_height+bar_padding)+")";
					 	 })
			

			bar.append("rect")
				.attr("width",function(d){return scale(d);})
				.attr("height",bar_height)
				.style("fill","steelblue")

			bar.append("text")
				.text(function(d){return d;})
				.attr("x",function(d){return scale(d+0.1);})
				.attr("y",bar_height/2+8)
          
        </script>

    </body>
</html>